<template>
  <div class="wrap">
    <div class="header clearfix">
      <el-select v-model="value" placeholder="账号类型" class="select" @change="userTypeChange">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <el-select v-model="value2" placeholder="状态" class="select" @change="statusChange">
        <el-option
          v-for="item in options2"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <el-input
        class="input"
        placeholder="请输入用户名"
        v-model="username"
        clearable>
      </el-input>
      <el-button type="primary" icon="el-icon-search" class="search-btn" @click="searchClick">搜索</el-button>
      <el-button type="primary" icon="el-icon-edit" round class="fr add-btn" @click="addAccount">添加账号</el-button>
    </div>
    <div>
      <el-table
        class="table"
        border fit highlight-current-row
        v-loading="loading"
        element-loading-text="加载中"
        element-loading-spinner="el-icon-loading"
        :data="tableData"
        style="width: 100%">
        <el-table-column
          align="center"
          type="index"
          label="编号"
          width="50">
        </el-table-column>
        <el-table-column
          align="center"
          prop="name"
          label="用户名">
        </el-table-column>
        <el-table-column
          align="center"
          prop="password"
          label="密码">
        </el-table-column>
        <el-table-column
          align="center"
          prop="channelName"
          label="渠道"
          width="200">
        </el-table-column>
          <el-table-column
          align="center"
          prop="productName"
          label="产品"
          width="200">
        </el-table-column>
        <el-table-column
          align="center"
          prop="roleName"
          label="角色">
        </el-table-column>
        <el-table-column
          align="center"
          label="状态">
          <template slot-scope="scope">
            {{scope.row.status ? '正常' : '禁用'}}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="更新时间"
          width="200">
          <template slot-scope="scope">
            {{_mapping.date_format(scope.row.updateAt)}}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="操作"
          width="100">
          <template slot-scope="scope">
            <el-button primary @click="update(scope.row)">修改</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="pagination"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="query.pageNum"
        :page-size="query.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalNum">
      </el-pagination>
    </div>
    <div class="other">
      <el-dialog
        :title="dialogTitle"
        :visible.sync="dialogVisible"
        :close-on-click-modal="false"
        class="dialogVisible"
        width="40%">
        <div style="text-align: center;">
          <div class="line">
            <span class="label"><span class="red">*</span>用户名</span>
            <el-input
              :disabled="nameDisable"
              class="input"
              placeholder="请输入用户名"
              v-model="add.username"
              clearable>
            </el-input>
          </div>
          <div class="line">
            <span class="label"><span class="red">*</span>密码</span>
            <el-input
              class="input"
              placeholder="请输入密码"
              v-model="add.password"
              clearable>
            </el-input>
          </div>
          <div class="line">
            <span class="label"><span class="red">*</span>角色</span>
            <el-select v-model="add.value_role" placeholder="请选择" class="select">
              <el-option
                v-for="item in options_role"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </div>
          <div class="line" v-if="this.add.value_role === 'CHANNEL_ADMIN'||this.add.value_role === 'STAFF_CHANNEL'">
            <span class="label"><span class="red">*</span>渠道</span>
            <el-select v-model="add.value_channel" multiple  placeholder="请选择" class="select">
              <el-option
                v-for="item in options_channel"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </div>
        
          <div class="line" v-if="this.add.value_role === 'STAFF_PRODUCT'">
            <span class="label"><span class="red">*</span>产品</span>
            <el-select v-model="add.value_product" multiple  placeholder="请选择" class="select">
              <el-option
                v-for="item in options_product"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </div>

          <div class="line">
            <span class="label"><span class="red">*</span>账户状态</span>
            <el-select v-model="add.value2_status" placeholder="请选择" class="select">
              <el-option
                v-for="item in options2_status"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="confirmAdd">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import _mapping from '@/utils/_mapping.js'
import _account from '@/services/account.js'
import _base from '@/services/base.js'
export default {
  data(){
    return {
      nameDisable: false,
      dialogTitle: '添加账号',
      add: {
        username: '',
        password: '',
        value_role: '',
        value_channel: [],
        value_product: [],
        value2_status: ''
      },
      dialogVisible: false,
      loading: false,
      username: '',
      value: '',
      options: [],
      options_role: [],
      options_channel: [],
      options_product: [],
      value2: '',
      options2: [{
        value: 0,
        label: '禁用'
      }, {
        value: 1,
        label: '正常'
      }],
      options2_status: [{
        value: 0,
        label: '禁用'
      }, {
        value: 1,
        label: '正常'
      }],
      tableData: [],
      query: {
        pageSize: 30,
        pageNum: 1
      },
      totalNum: 0
    }
  },
  methods: {
    // 修改账号信息
    update(item){
      console.log('a', item)
      this.dialogTitle = '修改'
      this.dialogVisible = true
      let channelId = []
      let productId = []

      this.add.value_role === 'CHANNEL_ADMIN'
      console.info("role",this.add.value_role)
      if(item.channelId!=null){
        channelId = item.channelId.split(',')
      }
      if(item.productId!=null){
        productId =  item.productId.split(',')
        for(let i=0;i<productId.length;i++){
            productId[i] =  parseInt(productId[i])
        }

      }
      this.add = {
        id : item.id,
        username: item.name,
        password: item.password,
        value_role: item.roleId,
        value_channel: channelId,
        value_product: productId,
        value2_status: item.status
      }
      this.nameDisable = true
      // if(this.add.value_role === '渠道管理员'){
      //   this.add.value_role = 'CHANNEL_ADMIN'
      // }else{
      //   this.add.value_role = 'SUPER_ADMIN'
      // }
    },
    // 账号类型change
    userTypeChange(val){
      console.log('userType', this.value)
      this.getAccountList()
    },
    // 账号状态change
    statusChange(val){
      console.log('userStatus', this.value2)
      this.getAccountList()
    },
    // 添加或修改确定
    confirmAdd(){
      let params = {
        "id" : this.add.id,
        "name": this.add.username,
        "role":this.add.value_role,
        "password":this.add.password,
        "channelId":this.add.value_channel,
        "productId":this.add.value_product,
        "status": this.add.value2_status
      }
      
      if (params.role == 'SUPER_ADMIN'||params.role =='STAFF_PRODUCT' || params.role == 'MAIN_CHANNEL_PRODUCT' || params.role == 'MAIN_FINACE') {
        params.channelId = []
      }
      if (params.role !== 'STAFF_PRODUCT') {
        params.productId = []
      }
      if(this.dialogTitle === '添加账号'){
        _account.addAccount(params)
        .then(res => {
          if(res.data.code === 200){
            this.$msg.success('添加成功')
            this.dialogVisible = false
            this.getAccountList()
          }else if(res.data.code === 2034){
            this.$msg.error(res.data.msg)
          }
        })
      }else{
        _account.updateAccount(params)
        .then(res => {
          if(res.data.code === 200){
            this.$msg.success('修改成功')
            this.dialogVisible = false
            this.getAccountList()
          }else if(res.data.code === 2034){
            this.$msg.error(res.data.msg)
          }
        })
      }
    },
    addAccount(){
      this.dialogTitle = '添加账号'
      this.dialogVisible = true
      this.add = {
        username: '',
        password: '',
        value_role: '',
        value_channel: '',
        value_product: '',
        value2_status: ''
      }
      this.nameDisable = false
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.query.pageSize = val
      this.getAccountList()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.query.pageNum = val
      this.getAccountList()
    },
    getAccountList(){
      let params = {
        "name": this.username,
        "pageNum": this.query.pageNum,
        "pageSize": this.query.pageSize,
        "status": this.value2,
        "roleId": this.value
      }
      _account.getAccountList(params)
      .then(res => {
        console.log('accountList', res.data)
        this.tableData = res.data.list
        this.totalNum = res.data.total
      })
    },
    searchClick(){
      this.getAccountList()
    },
    // 获取渠道列表
    getchannel(){
      _base.getChannelList()
      .then(res => {
        if(res.data && res.data.length){
          res.data.map(json => {
            let item = {}
            item.value = json.channelId
            item.label = json.name
            this.options_channel.push(item)
          })
        }
      })
    },
      // 获取产品列表
    getProduct(){
      _base.getProductList()
      .then(res => {
        if(res.data && res.data.length){
          res.data.map(json => {
            let item = {}
            item.value = json.id
            item.label = json.name
            this.options_product.push(item)
          })
        }
      })
    },
    // 获取账号类型
    getAccountType(){
      _base.getAccountTypeList()
      .then(res => {
        console.log('accounttype',res.data)
        if(res.data && res.data.length){
          res.data.map(json => {
            let item = {}
            item.value = json.roleId
            item.label = json.name
            this.options.push(item)
            this.options_role.push(item)
          })
        }
      })
    }
  },
  created(){
    this.getAccountList()
    this.getAccountType()
    this.getchannel()
    this.getProduct()
  }
}
</script>
<style lang="scss" scoped>
.wrap{
  .header{
    .select{
      width:150px;
    }
    .input{
      display: inline-block;
      width:200px;
    }
    .add-btn{
      height: 40px;
      font-size: 12px;
    }
  }
  .table{
    margin-top: 10px;
    margin-bottom: 25px;
  }
  .other{
    .dialogVisible{
      .line{
        margin-bottom: 10px;
        .input, .select{
          width:250px;
        }
      }
      .label{
        display: inline-block;
        width:80px;
        text-align: right;
        margin-right: 10px;
        font-weight: bold;
        font-size: 14px;
        .red{
          color: #f00;
        }
      }
    }
  }
}
</style>


